<template>
	<view class="containers">

		<view class="main-app">

			<view class="main-content zh">
				<view class="m-0 row">
					<view class="col-12 pt-3 col" v-for="(item,index) in poolList" :key="index">
						<view>
							<view class="m-0 row">
								<view class="col-12 p-0 col">
									<view style="padding: 0em 0.3em;">
										<view class="active-card-package">
											<view class="card-package card">
												<view class="card-number">
													{{index+1}}{{$t('Lottery_pool')}}
												</view>
												<view class="m-0 row">
													<view class="col-12 col">
														<label class="price justify-content-center">
															{{$t('Total_prize_pool_participation')}}
														</label>
													</view>
													<view class="col-12 col">
														<label class="price justify-content-center usdt-pool"
															v-if="boxSums[item['indexs']]">
															{{boxSums[item['indexs']]['allmoney']}}MTCC
														</label>
														<label class="price justify-content-center usdt-pool" v-else>
															0 MTCC
														</label>
													</view>
												</view>
												<view class="m-0 row">

													<view class="col-12 col-lg-3 d-flex align-items-center gap-2 col">

														<button type="button" @click="goBuy(item.indexs)"
															class="boxBtn package-button justify-content-center btn btn-primary">
															<view class="boxBtn_laber" v-if="boxSums[item['indexs']]">
																{{involved}}({{$t('left')}}{{boxSums[item['indexs']]['sums']}}{{$t('time')}})
															</view>
															<view class="boxBtn_laber" v-else>
																{{involved}}({{$t('50_times_left')}})
															</view>
														</button>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view role="dialog" aria-modal="true" v-if="showBuy"
			class="fade confirm-modal-container purchase-wallet-modal modal show" tabindex="-1"
			style="display: block; ">
			<view class="modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable"
				style="justify-content: center;">
				<view class="">
					<view class="col-12 col">
						<view class="card-one info-panel card">
							<view class="m-0  row">

								<view class="col-12 mb-2 col">
									<view class="convert-currency-container card modal-content">
										<view class="modal-header"><label class="title"
												style="font-size: 30rpx;">{{$t('Participation_blind_box')}}</label>
											<view @click="closeChange" class="right" type="button" data-dismiss="modal"
												aria-label="Close"><svg xmlns="http://www.w3.orgz/2000/svg" width="25"
													class="stroke" height="25" viewBox="0 0 16 16">
													<path fill="none" stroke="#c1d1ff" stroke-linecap="round"
														stroke-linejoin="round" stroke-width="1.5"
														d="m11.25 4.75l-6.5 6.5m0-6.5l6.5 6.5"></path>
												</svg></view>
										</view>
										<view><label>{{$t('Convert_from')}}</label>

											<view class="input-group">
												<view class="line-group"><input type="text" step="any"
														name="from-currency" value="1MTCC" disabled="">

												</view><span class="form-label-balance">
													{{$t('all_balance')}}: {{userinfo.coin}}
													{{topChange}}</span>
											</view>
										</view>
										<view style="margin-top: 20rpx;">
											<label>{{$t('input_your_password')}}</label>

											<view class="input-group " style="margin-top: 0rpx;">
												<view class="line-group"><input :placeholder="input_your_password"
														type="password" step="any" name="from-currency"
														v-model="paypassword" />

												</view>
											</view>
										</view>
										<view style="margin-top: 20rpx;">
											<label>{{$t('Number_of_participation')}}</label>

											<view class="input-group " style="margin-top: 0rpx;">
												<view class="line-group"><input :placeholder="enter_the_number"
														type="number" step="any" name="from-currency" v-model="nums"
														maxlength="2" />

												</view>
											</view>
										</view>
										<view>
											<u-button type="primary" :loading="isLoading" :loadingText="loading"
												class="confirm-button  btn-primary" @click="involvedSubmit"
												style="text-align: center;line-height: 50px;height: 50px">{{$t('Confirm_participation')}}</u-button>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import topWallet from "@/components/nav/top_wallet.vue"
	export default {
		components: {
			topWallet,
		},
		data() {
			return {
				enter_the_number: this.$t('enter_the_number'),
				list: [
					this.$t('No_drawing_record'),
					this.$t('Winning_record')
				],
				curNow: 0,
				userinfo: {},
				loading: this.$t('Load'),
				loadText: "",
				input_your_password: this.$t('input_your_password'),
				buyLoading: false,
				isLoading: false,
				loadn: false,
				select: 0,
				pageIndex: 1,
				open_reg: false,
				isopen: false,
				hasToken: false,
				showBuy: false,
				showChange: false,
				topChange: 'MTCC',
				boxSums: [],
				involvedStatus: 0,
				paypassword: '',
				box_number: 1,
				nums: '1',
				involved: this.$t('click-to-participate'),
				poolList: [{
						name: this.$t('Total_prize_pool_participation'),
						money: "0MTCC",
						indexs: 1
					},
					{
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 2,
					},
					{
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 3,
					}, {
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 4,
					}, {
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 5,
					}, {
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 6,
					}, {
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 7,
					}, {
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 8,
					},
					{
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 9,
					}, {
						name: this.$t('Total_prize_pool_participation'),
						money: "0 MTCC",
						indexs: 10,
					}
				]

			};
		},
		onLoad: function() {

		},

		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.init()
				this.setTitle()
			}
		},
		methods: {
			setTitle() {
				uni.setNavigationBarTitle({
					title: this.$t('Blind_box_list')
				});
			},
			interchange() {
				this.showChange = true
			},
			closeChange() {

				this.showBuy = false
			},
			goBuy(type) {
				this.box_number = type
				this.showBuy = true
			},
			closeBuy() {
				this.showBuy = false
			},

			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: 'default'
				};
				this.$refs.toast.showTips(options);
			},
			/* 钱包链接 */
			connectWallet() {
				let result = this.web3Rpc.handleWalletConnect();
				Promise.resolve(result).then((value) => {
					if (value) {
						this.open_reg = true
						this.names = value
					}
				})
			},
			init() {
				let token = this.tui.getToken();
				let data = {
					token: token,
				};
				let resultss = this.tui.request('/api/user/userAccount', 'post', data, 1000, 1, '', 'userAccount');

				Promise.resolve(resultss).then((value) => {
					if (value.code == 200) {
						this.userinfo = value.data;
					} else {
						this.tui.toast(value.message);
					}
				})

				let boxOrder = this.tui.request('/api/user/getBoxStatus', 'post', data, 1000, 1, '', 'getBoxStatus');
				Promise.resolve(boxOrder).then((value) => {
					if (value.code == 200) {
						this.boxSums = value.data
					}
				})
			},
			involvedSubmit() {
				this.isLoading = true;

				let token = this.tui.getToken();
				let datas = {
					token: token,
					paypassword: this.paypassword,
					box_number: this.box_number,
					nums: this.nums
				};
				let result = this.tui.request('/api/user/involvedBox', 'post', datas, 1000, 1, '', 'involvedBox');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.tui.toast(value.message);
						setTimeout(() => {
							this.closeChange();
							this.isLoading = false;
							this.init()
						}, 1000);
						//写入缓存
					} else {
						this.isLoading = false;
						this.tui.toast(value.message);
					}
				})
			},
			langPop() {
				this.isopen = true
			},
			closeOpen() {
				this.isopen = false
				this.open_reg = false
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onReachBottom: function() {
			if (this.loadn) return
			this.getBoxList()
		},

	};
</script>
<style lang="scss">
	@import '../../static/css/defalut.css';

	page {
		background-color: #252C46;
	}

	.containers {
		// background: url(../../static/images/common/bg.jpg) #000 top no-repeat;

		background-size: 100%;
		margin: 0 !important;
		// -webkit-filter: brightness(70%);
		// filter: brightness(90%);
		width: 100%;
		min-height: 100vh;

	}

	.main-app {
		overflow-y: auto;
	}

	.card-number {
		font-size: 30rpx;

	}

	.btn-secondary-buy {
		--bs-btn-color: #fff;
		--bs-btn-bg: #808080;
		--bs-btn-border-color: #808080;
		--bs-btn-hover-color: #fff;
		--bs-btn-hover-bg: #808080;
		--bs-btn-hover-border-color: #808080;
		--bs-btn-focus-shadow-rgb: 130, 138, 145;
		--bs-btn-active-color: #fff;
		--bs-btn-active-bg: #808080;
		--bs-btn-active-border-color: #808080;
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
		--bs-btn-disabled-color: #fff;
		--bs-btn-disabled-bg: #808080;
		--bs-btn-disabled-border-color: #808080
	}

	.line-group {
		display: flex;
		justify-content: space-between;
		width: 100%;
		border-bottom: 2px solid rgba(193, 209, 255, .38)
	}

	.stroke {
		stroke: transparent;
		stroke-width: 0;
	}

	svg {
		border: none;
	}

	.right {
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translateY(-50%)
	}

	.boxBtn {
		margin: 0 auto;
		text-align: center;
		width: 300rpx;
		height: 60rpx;
		margin-top: 20rpx;
		font-size: 24rpx !important
	}

	.boxBtn_laber {
		background: linear-gradient(180deg, #fbe5d8, #f1c594);
		background-clip: border-box;
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		font-family: Poppins;
		font-size: 24rpx;
		font-weight: 700;
		line-height: 15px;
		text-transform: uppercase;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.usdt-pool {
		margin-top: 10rpx;
		font-size: 32rpx;
	}
</style>